<template>
	<view class="PersonLogon por f-background">
		<image class="logon-backs poa" src="@/static/img/back.png" mode="widthFix"></image>
		<view class="perso por">
			<view class="perso-title font-weight-600 color3 size-40">欢迎来到领火饭票</view>
			<u-tabs :list="tabsList" :activeStyle="activePack" :inactiveStyle="inactivePack" lineColor="#ffffff"
				lineWidth="48rpx" lineHeight="6rpx" :current="current" @click="onSwitchTas"></u-tabs>
			<view class="perso-tab dis-ali">
				<view class="perso-right" @click="logoType=0">
					<text class="size-28"
						:class="logoType != 0 ?'font-weight-400 color6':'font-weight-500 color'">密码登录</text>
					<view class="tiao" :class="{'opacity1':logoType==0}" :style="{ background: settings.color }"></view>
				</view>
				<view class="perso-right" @click="logoType=1">
					<text class="size-28"
						:class="logoType != 1 ?'font-weight-400 color6':'font-weight-500 color'">验证码登录</text>
					<view class="tiao" :class="{'opacity1':logoType==1}" :style="{ background: settings.color }"></view>
				</view>
			</view>
			<u-form :model="form" ref="uForm" :rules="rules">
				<view v-if="logoType != 0">
					<u-form-item prop="mobile" labelWidth="12rpx">
						<u-input v-model="form.mobile" maxlength="11" type="number"
							class="input-phone font-weight-400 size-28 color3 radius12" placeholder="手机号" />
					</u-form-item>
					<view class="input-code-ming"></view>
					<u-form-item prop="smscode" labelWidth="12rpx">
						<view class="dis-ali input-code">
							<u-input v-model="form.smscode" maxlength="6"
								class="width100 font-weight-400 size-28 color3 radius12" placeholder="验证码" />
							<view>
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" changeText="Xs" @start="start" ref="uCode"
									@change="codeChange"></u-code>
								<view class="font-weight-400 size-24 color-8" @tap="postSmsByPhone">{{tips}}</view>
							</view>
						</view>
					</u-form-item>
				</view>
				<view v-else>
					<u-form-item prop="loginName" labelWidth="12rpx">
						<u-input v-model="form.loginName" maxlength="11"
							class="input-phone font-weight-400 size-28 color3 radius12" placeholder="手机号" />
					</u-form-item>
					<view class="input-code-ming"></view>
					<u-form-item prop="passWord" labelWidth="12rpx">
						<u-input password v-model="form.passWord"
							class="width100 font-weight-400 size-28 color3 radius12" placeholder="密码" />
					</u-form-item>
				</view>
				<u-button type="primary" :throttleTime="2000"
					:customStyle="{width: '636rpx',height: '84rpx',borderRadius: '8rpx',margin: '68rpx auto 0', boxShadow: '0rpx 8rpx 20rpx 0rpx rgba(255,26,26,0.16)' }"
					color="linear-gradient( 179deg, #FF621A 0%, #FF1A1A 100%)" @click="submit">
					<text class="color-f font-weight-600 size-32">登录</text>
				</u-button>
				<view class="privacy dis-ali">
					<view class="open-select radius100 dis" @click="selectIndex = selectIndex ? false : true"
						:class="selectIndex ? 'background':'open-on-select'">
						<text class="iconfont icon-gou color-f size-30" v-if="selectIndex"></text>
					</view>
					<view class="font-weight-400 color6 size-22 dis-ali">
						<text @click="selectIndex = selectIndex ? false : true">已阅读并同意</text>
						<navigator class="color" hover-class="none" url="/packagePerson/user-agreement/user-agreement">
							《用户协议》</navigator> 与
						<navigator class="color" hover-class="none" url="/packagePerson/privacy-policy/privacy-policy">
							《隐私政策》</navigator>
					</view>
				</view>
			</u-form>
		</view>
		<!-- 隐私政策 -->
		<u-popup mode="center" round="26rpx" :show="privacyName" :safeAreaInsetBottom="false">
			<Privacy @close="privacyName = ''" />
		</u-popup>
	</view>
</template>

<script>
	import { settings } from "@/utils/public"
	import { OnlineStatic, LoginBySms, LoginByPass, SmsByPhone } from "@/api/index"
	// import { activeLogo, inactiveLogo } from '@/utils/style/tabs';
	import Privacy from "@/components/privacy/privacy"
	export default {
		components: { Privacy },
		data() {
			return {
				settings,
				tips: '',
				seconds: 10,
				privacyName: '',
				OnlineStatic,
				selectIndex: false, // 已阅读并同意
				logoType: 0, // 0=密码 1=验证码
				form: {
					loginName: '', // 登录账号（手机号）
					passWord: '', // 登录密码
					mobile: '', // 登录账号（手机号）
					smscode: '', // 验证码
					appClent: 'delivery-app',
					code: ''
				},
				urlData: {
					5: '/pages/regimental/index', // 团长
					2: '/pages/administrator/index', // 管理员
					4: '/pages/index/index', // 跑腿员
				},
				rules: {
					loginName: [{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(13|14|15|16|17|18|19)\d{9}$/,
						transform(value) {
							return String(value);
						},
						message: '请输入正确的手机号',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^(13|14|15|16|17|18|19)\d{9}$/,
						transform(value) {
							return String(value);
						},
						message: '请输入正确的手机号',
						trigger: ['blur', 'change']
					}],
					smscode: [{
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{6}$/,
						transform(value) {
							return String(value);
						},
						message: '请输入6位验证码',
						trigger: ['blur', 'change']
					}],
					passWord: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change'],
					},
				},
			}
		},
		onShow() {
			this.privacyName = uni.getStorageSync('privacyContractName')
			console.log('this.privacyName', this.privacyName)
			if (uni.getStorageSync('token')) this.guard()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			guard() {
				uni.reLaunch({
					url: this.urlData[uni.getStorageSync('userInfo').roleId]
				});
			},
			// 获取code
			bindLogin(logoType) {
				const _this = this
				uni.login({
					success: function(loginRes) {
						console.log('loginRes.code', loginRes.code)
						if (loginRes.errMsg == 'login:ok') {
							_this.form.code = loginRes.code
							if (logoType == 0) { // 密码
								_this.postLoginByPass()
							} else { // 验证码
								_this.postLoginBySms()
							}
						} else {
							uni.showToast({
								title: loginRes.errMsg,
								icon: 'none',
							})
						}
					},
					complete(res) {}
				});
			},
			onShowToast(data) {
				uni.showToast({
					title: data,
					duration: 2000,
					icon: 'none'
				});
			},
			// 验证码登录
			async postLoginBySms() {
				const { data, code } = await LoginBySms(this.form)
				if (code == '200') {
					uni.setStorageSync('token', data.token)
					uni.reLaunch({
						url: this.urlData[data.roleId]
					});
				}
			},
			// 密码登录
			async postLoginByPass() {
				const { data, code } = await LoginByPass(this.form)
				if (code == '200') {
					uni.setStorageSync('token', data.token)
					uni.reLaunch({
						url: this.urlData[data.roleId]
					});
				}
			},
			submit() {
				const { logoType, selectIndex } = this
				this.$refs.uForm.validate().then(res => {
					if (!selectIndex) {
						this.onShowToast('请阅读并同意相关协议')
						return
					}
					this.bindLogin(logoType)
					// if (logoType == 0) { // 密码
					// 	this.postLoginByPass()
					// } else { // 验证码
					// 	this.postLoginBySms()
					// }
				}).catch(errors => {})
			},
			codeChange(text) {
				this.tips = text;
			},
			async postSmsByPhone() {
				const { logoType, form } = this
				if (this.$refs.uCode.canGetCode) {
					if ([0].includes(logoType) && !form.loginName || [1].includes(logoType) && !form.mobile) {
						this.onShowToast('请输入手机号')
						return
					}
					const { data, code } = await SmsByPhone({ phone: form.mobile || form.loginName })
					if (code == '200') {
						this.$refs.uCode.start(); // // 通知验证码组件内部开始倒计时
					}
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.PersonLogon {
		height: 100vh;

		.perso {
			padding: 248rpx 57rpx 0;
			z-index: 10;

			.perso-tab {
				margin-bottom: 38rpx;

				.perso-right {
					margin-right: 52rpx;
				}
			}

			.input-code-ming {
				margin-bottom: 32rpx;
			}

			::v-deep.u-form-item__body__right {
				background: #F7F7F7;
				padding: 0 24rpx 0 28rpx;
			}

			::v-deep.u-form-item__body__right__message {
				margin-left: 0rpx !important;
			}

			.perso-title {
				margin-bottom: 116rpx;
			}

			.tiao {
				width: 48rpx;
				height: 6rpx;
				border-radius: 100rpx;
				margin: 8rpx auto 0;
				opacity: 0;
			}

			.opacity1 {
				opacity: 1;
			}

			::v-deep.u-border {
				border: 0 !important;
				padding: 0 !important;

				.u-input__content__field-wrapper__field {
					height: 80rpx;
				}
			}

			.input-phone {
				margin-top: 98rpx;
			}

			.privacy {
				margin-top: 34rpx;
			}
		}

		.logon-backs {
			width: 100%;
			height: 1200rpx;
		}
	}
</style>